<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创作弹窗</title>
    <link rel="stylesheet" href="${request.contextPath}/layuiadmin/layui/css/layui.css" media="all">
</head>
<style>
    .layui-layer-page .layui-layer-content {
        overflow: visible !important;
    }
    .time{
        font-size: 40px;
        font-weight: bolder;
        text-align: center;

    }
    span{
        margin-bottom: 10px;
        margin-top: 10px;
    }
</style>
<body style="background-color: #F2F2F2;" >
<div style="padding: 20px; ">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body" style="text-align: center">
                    <form class="layui-form" method="post" style="margin-top: 10px;text-align: center" lay-filter="dataForm">
                        <input type="text" name="id"  autocomplete="off" class="layui-input" value="${(item.id)!}" style="display: none">
                        <div class="layui-form-item" style="margin-top: 10px">
                            <label class="layui-form-label">名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input" value="${(item.name)!}">
                            </div>
                        </div>
                        <div class="layui-form-item" style="margin-top: 10px">
                            <label class="layui-form-label">音符</label>
                            <div class="layui-input-block">
                                <textarea name="note" placeholder="请输入内容" class="layui-textarea">${(item.note)!}</textarea>
                            </div>
                        </div>
                        <div class="layui-form-item" style="margin-top: 10px">
                             <label class="layui-form-label">高音</label>
                             <div class="layui-input-block">
                                 <textarea name="pitch" placeholder="请输入内容" class="layui-textarea">${(item.pitch)!}</textarea>
                             </div>
                        </div>
                        <div class="layui-form-item" style="margin-top: 10px">
                             <label class="layui-form-label">节拍</label>
                             <div class="layui-input-block">
                                 <textarea name="meter" placeholder="请输入内容" class="layui-textarea">${(item.meter)!}</textarea>
                             </div>
                        </div>
                        <div class="layui-form-item" style="margin-top: 10px">
                            <label class="layui-form-label">组成</label>
                            <div class="layui-input-block">
                                <textarea name="component" placeholder="请输入内容" class="layui-textarea">${(item.component)!}</textarea>
                            </div>
                        </div>
                        <div class="layui-form-item" style="margin-top: 10px">
                            <label class="layui-form-label">调性</label>
                            <div class="layui-input-block">
                                <input type="text" name="tone" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input" value="${(item.tone)!}">
                            </div>
                        </div>
                        <button type="button" id="preview" class="layui-btn">预览</button>
                        <button id="add" class="layui-btn" lay-filter="submit" lay-submit style="display: none">提交</button>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>
<script src="${request.contextPath}/layuiadmin/layui/layui.js"></script>

<script>
    layui.config({
        base: '${request.contextPath}/layuiadmin/modules/' //静态资源所在路径
    }).extend({
        xmSelect: 'xm-select'
    }).use(['form','jquery','laydate','xmSelect','upload','element','layer'], function(){
       var form=layui.form;
       var $=layui.$;
        var laydate=layui.laydate;
        var upload=layui.upload;
        var element = layui.element;
        var layer=layui.layer;

        //预览
        $("#preview").on('click',function () {
            console.log("点击预览")
            var data = form.val('dataForm');

            $.ajax({
                type:"post",
                url: "${request.contextPath}/${page}/preview",
                async:false,
                contentType:'application/json; charset=UTF-8',
                data: JSON.stringify(data),
                // data: {customer:data.field},
                // data:data.field,
                success: function(res) {
                    console.log("=====预览=====")
                    console.log(res)
                    console.log('${request.contextPath}/audio/'+res.data+".wav")
                    $("#source").attr('src','${request.contextPath}/'+res.data+".wav")
                    layer.open({
                        title:'预览',
                        type: 1,
                        area: ['500px', '210px'],
                        // area: '30%',
                        content: $('#content'), //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                        btn: ['确认'], //按钮
                        yes:function (index,layero) {
                            addLayerIndex=index;
                            layer.close(index)
                        }
                    });
                },
                error: function(res) {
                    layer.alert(res.msg,{icon:2})
                }
            })
            console.log(data)
            console.log($("#source"))

        })



        form.on('submit(submit)', function(data){
            console.log(data.field);
            $.ajax({
                type:"post",
                url: "${request.contextPath}/${page}/saveItem",
                contentType:'application/json; charset=UTF-8',
                data: JSON.stringify(data.field),
                // data: {customer:data.field},
                // data:data.field,
                success: function(res) {
                    console.log("=====success=====")
                    console.log(res)
                    if(res.code===200){
                        layer.alert(res.msg,{icon:1},function () {
                            //调用父页面的关闭方法。
                            parent.closeAddLayer();
                            parent.reloadCustomerList();
                        })
                    }
                },
                error: function(res) {
                    layer.alert(res.msg,{icon:2})
                }
            })
            return false;
        });
        window.closeLayer=function(index){
            layer.close(index)
        }
        window.saveItem=function (data){
            $.ajax({
                type:"post",
                url: "${request.contextPath}/${page}/saveItem",
                contentType:'application/json; charset=UTF-8',
                data: JSON.stringify(data.field),
                // data: {customer:data.field},
                // data:data.field,
                success: function(res) {
                    console.log("=====success=====")
                    console.log(res)
                    if(res.code===200){
                        layer.alert(res.msg,{icon:1},function () {
                            //调用父页面的关闭方法。
                            parent.closeAddLayer();
                            parent.reloadCustomerList();
                        })
                    }
                },
                error: function(res) {
                    layer.alert(res.msg,{icon:2})
                }
            })
        }

    });
</script>

</body>
<div style="padding: 20px;display: none;" id="content" >
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <br>
                <audio controls style="margin: 0 auto;display: block;">
                    <source id="source" src=''/>
                </audio>
                <br>
            </div>
        </div>
    </div>
</div>
</html>